<template>
	<view class="page must_know" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="title" :showHome="false"></c-nav-bar>
		<u-swiper :list="detailsList.urlList" @change="e => currentNum = e.current" :autoplay="false"
			indicatorStyle="right: 20px" height='422rpx' style="margin-bottom: 30rpx;">
		</u-swiper>
		<view class="basicInfo">
			<view class="name">{{detailsList.name}} </view>
			<view class="time" style="margin: 10rpx 0;">
				{{detailsList.info}}
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '详情',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				currentNum: null,
				tickets: [1, 2, 3],
				fyInd: 0,
				id: 0,
				count: 5,
				num: 4,
				detailsList: {},
				list: {}
			}
		},

		onLoad(option) {
			console.log('111111111111111111', option)
			if (option.caipid) {
				let postdata = {
					limit: 5,
					page: 1,
					orderField: '', //（排序字段）
					isMapId: option.caipid, //（搜索框名称）
					areaCode: '', //（区域编码）
					type: '', //（菜品类型）
				}

				this.$api.get('/api/isFood/page', postdata)
					.then(res => {
						//console.log( res.data.data);
						if (res.data.data.list.length == 0) {
							this.detailsList = [];
							this.$refs.uToast.show({
								type: 'success',
								title: '',
								message: "请联系管理员在地图数据里添加数据",
								iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
							})
							// 在1000毫秒后输出"Hello World!"
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 2000);

						} else {
							this.detailsList = res.data.data.list[0];
							this.getList(this.detailsList.id);
						}
					})

			}
			// else if (option.portid) {
			// 	this.getList(option.portid)
			// 	return
			// }
			else {
				this.detailsList = JSON.parse(option.list)
				console.log(this.detailsList, '+++++++');
				// this.detailsList.latitude = this.detailsList.latitude
				// this.detailsList.longitude = this.detailsList.longitude
				this.getList(JSON.parse(option.list).id)
			}
			//console.log(JSON.parse(option.list));

		},
		methods: {
			// 联系商家
			phone() {
				uni.makePhoneCall({
					phoneNumber: this.detailsList.linkPhone //仅为示例
				});
			},
			// 监督电话
			phoneed() {
				uni.makePhoneCall({
					phoneNumber: this.detailsList.linkPhone //仅为示例
				});
			},
			// 导航
			goLocation() {
				let lat = this.detailsList.latitude
				let lon = this.detailsList.longitude
				console.log(lat, lon, '---------');
				// uni.navigateTo({
				// 	url: '/pages/touristMap/Navigationmap?lat=' + lat + '&lon=' + lon
				// })
				uni.openLocation({
					latitude: Number(this.detailsList.latitude),
					longitude: Number(this.detailsList.longitude),
					name: this.detailsList.name,
				});

			},
			// 菜品
			goryclick(item) {
				console.log('菜品', item);
			},
			// 获取详情数据
			getList(foodId) {
				this.$api.get(`/api/isFood/isfoodsuggest/${foodId}`).then(res => {
					console.log(res.data);
					this.list = res.data.data
					console.log(this.list);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		background-color: #ffffff;

	}

	.currentNum {
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		@include flex;
		justify-content: center;
		color: #FFFFFF;
	}


	.basicInfo {
		padding: 40rpx 24rpx;
		border-radius: 24rpx 24rpx 0 0;
		background-color: #fff;
		// border-bottom: 1rpx solid #EFEFEF;

		.name {
			font-size: 40rpx;
			color: #1C1E41;
			font-weight: Bold;
		}

		.time {
			font-size: 28rpx;
			color: #5A607C;
			font-weight: Regular;
		}
	}


	.bottom {
		display: flex;
		justify-content: space-between;
	}




	.content {
		padding: 16rpx 16rpx 160rpx;
		box-sizing: border-box;



		.title {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			padding: 16rpx 0;
		}


	}

	.pot-btn {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		box-sizing: border-box;
		height: 120rpx;
		align-items: center;
		text-align: center;
		background-color: #fff;
		justify-content: space-between;
		padding: 16rpx;

		.left {
			text-align: center;
		}

		.right {
			width: 506rpx;
			height: 88rpx;
			line-height: 88rpx;
			/* 自定义线性渐变，从左上到右下，同时包含多个颜色 */
			background: linear-gradient(to right, #0EBFFE, #00D3E8);
			font-size: 31rpx;
			color: #FFFFFF;
			text-align: center;
			border-radius: 50rpx;
		}
	}
</style>